<template>
  <div class="whole">
    <h3>具名插槽</h3>
    <div class="tips tips-head">
      头部数据
      <slot name="header"></slot>
    </div>
    <div class="tips tips-body">
      主体数据
      <slot></slot>
    </div>
    <div class="tips tips-foot">
      尾部数据
      <slot name="foot"></slot>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>
<style lang="less" scoped>
@import url('../assets/less/webCommon.less');
.tips {
  width: 100%;
  height: 30%;
}
.tips-head {
  background-color: aquamarine;
}
.tips-body {
  background-color: rgb(100, 43, 165);
}
.tips-foot {
  background-color: rgb(93, 179, 150);
}
</style>
